<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/static/alipay/css/alipay.css}"/>
    <title>支付宝支付</title>
</head>
<body>
<header class="am-header">
    <h1>支付宝支付体验入口页</h1>
</header>
<div id="main">
    <div id="tabhead" class="tab-head">
        <h2 id="tab1" class="selected" name="tab" data-id="0">付 款</h2>
        <h2 id="tab2" name="tab" data-id="1">交 易 查 询</h2>
        <h2 id="tab3" name="tab" data-id="2">退 款</h2>
        <h2 id="tab4" name="tab" data-id="3">退 款 查 询</h2>
        <h2 id="tab5" name="tab" data-id="4">交 易 关 闭</h2>
        <h2 id="tab6" name="tab" data-id="5">扫码支付</h2>
    </div>
    <div id="body1" name="divcontent">
        <form name="alipayment" action="/alipay/pcPay" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="pc_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>订单名称 ：</dt>
                <dd>
                    <input id="pc_subject" name="subject"/>
                </dd>
                <hr class="one_line">
                <dt>付款金额 ：</dt>
                <dd>
                    <input id="pc_total_amount" name="totalFee"/>
                </dd>
                <hr class="one_line">
                <dt>商品描述：</dt>
                <dd>
                    <input id="pc_body" name="body"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="button" style="text-align: center;" onclick="submitFrom(0)">付 款</button>
                    </span>
                    <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="body2" name="divcontent">
        <form name="alipayment" action="/alipay/alipayTradeQuery" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="query_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="query_trade_no" name="tradeNo"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="submit" style="text-align: center;" onclick="submitFrom(1)">交 易 查 询</button>
                    </span>
                    <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易查询”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="body3" name="divcontent">
        <form name="alipayment" action="/alipay/alipayTradeRefund" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="refund_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="refund_trade_no" name="tradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>退款金额 ：</dt>
                <dd>
                    <input id="refund_amount" name="refundAmount"/>
                </dd>
                <hr class="one_line">
                <dt>退款原因 ：</dt>
                <dd>
                    <input id="refund_reason" name="refundReason"/>
                </dd>
                <hr class="one_line">
                <dt>退款请求号 ：</dt>
                <dd>
                    <input id="refund_out_request_no" name="outRequestNo"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="submit" style="text-align: center;" onclick="submitFrom(2)">退 款</button>
                    </span>
                    <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="body4" name="divcontent">
        <form name="alipayment" action="/alipay/alipayTradeRefundInfo" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="refund_query_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="refund_query_trade_no" name="tradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>退款请求号 ：</dt>
                <dd>
                    <input id="refund_query_out_request_no" name="outRequestNo"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="submit" style="text-align: center;" onclick="submitFrom(3)">退 款 查 询</button>
                    </span>
                    <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款查询”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="body5" name="divcontent">
        <form name="alipayment" action="/alipay/alipayTradeClose" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="close_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>支付宝交易号 ：</dt>
                <dd>
                    <input id="close_trade_no" name="tradeNo"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="submit" style="text-align: center;" onclick="submitFrom(4)">交 易 关 闭</button>
                    </span>
                    <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易关闭”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="body6" name="divcontent">
        <form name="alipayment" action="/alipay/qrCodePay" method="post" target="_blank">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="code_out_trade_no" name="outTradeNo"/>
                </dd>
                <hr class="one_line">
                <dt>订单名称 ：</dt>
                <dd>
                    <input id="code_subject" name="subject"/>
                </dd>
                <hr class="one_line">
                <dt>付款金额 ：</dt>
                <dd>
                    <input id="code_total_amount" name="totalFee"/>
                </dd>
                <hr class="one_line">
                <dt>商品描述：</dt>
                <dd>
                    <input id="code_body" name="body"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd>
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" type="button" style="text-align: center;" onclick="submitFrom(5)">付 款</button>
                    </span>
                    <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </form>
    </div>
    <div id="foot">
        <ul class="foot-ul">
            <li>支付宝版权所有 2015-2018 ALIPAY.COM</li>
        </ul>
    </div>
</div>
</body>
<script th:src="@{/webjarslocator/jquery/jquery.min.js}"></script>
<script th:src="@{/static/js/md5.js}"></script>
<script th:src="@{/static/js/pay_common.js}"></script>
<script type="text/javascript">
    $(function () {
        $("div[name='divcontent']").hide();
        $("h2[name='tab']").mousemove(function () {
            $("h2[name='tab'][class='selected']").removeClass("selected");
            $(this).addClass("selected");
            $("div[name='divcontent']").hide();
            var divOp = $("div[name='divcontent']");
            $(divOp[$(this).data('id')]).show();
        });
        getDateNow();
    });

    function getDateNow() {
        $('#pc_out_trade_no').val(randomNumber());
        $('#pc_subject').val('测试支付');
        $('#pc_total_amount').val(0.01);
        $('#code_out_trade_no').val(randomNumber());
        $('#code_subject').val('测试支付');
        $('#code_total_amount').val(0.01);
    }

    function randomNumber() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        return sNow;
    }

    function submitFrom(num) {
        var form = $('form[name="alipayment"]')[num];
        console.log(form);
        var timeStamp = Date.parse(new Date()) / 1000;
        var requestId = randomNumber();
        var channelNo = 'XN';
        var version = '1.0';
        var hmac = hex_md5(gethmac(requestId, channelNo, timeStamp, version));
        hmac = hmac.toUpperCase();
        $.ajax({
            type: 'post',
            url: form.action,
            data: $(form).serialize(),
            // contentType: false,//这里
            processData: false,//这两个一定设置为false
            headers: {
                'requestId': requestId,
                // 渠道号 XN 对应带有xn后缀的配置文件,BT 对应带有bt后缀的配置文件
                'channelNo': channelNo,
                'timeStamp': timeStamp,
                'hmac': hmac,
                'version': version
            },
            success: function (result) {
                //打印服务端返回的数据(调试用)
                console.log(result);
                $('#main').html(result);
            },
            error: function () {
                alert("异常！");
            }
        })
    }
</script>
</html>